<template>
  <basic-dialog
    title="温馨提示"
    :visible="visible"
    :width="440"
    has-footer
    single-button
    @closed="emit('update:visible', false)"
  >
    <div class="w-full text-[#454954]">
      <div class="mb-4">因域名错误、重复等原因，有域名及记录未成功添加</div>
      <div class="custom-table">
        <div class="t-head font-semibold">
          <div class="w-1/3 pl-4">成功添加域名</div>
          <div class="w-1/3 pl-4">成功添加记录</div>
          <div class="w-1/3 pl-4">未成功添加域名</div>
        </div>
        <div class="t-body">
          <div class="w-1/3 pl-4">{{ +state.success_count }}个</div>
          <div class="w-1/3 pl-4">{{ state.success_rr_count }}条</div>
          <div class="w-1/3 pl-4">{{ state.fail_domains.length }}个</div>
        </div>
      </div>
      <div class="mt-6 mb-[10px] text-[#868D9D]">
        存在域名错误、重复的输入内容如下：
      </div>
      <div
        class="flex flex-col h-[150px] p-2 bg-[#F7F8FA] border border-solid border-[#DCDCDC] rounded"
      >
        <el-scrollbar>
          <div v-for="(item, index) in state.fail_domains" :key="index">
            {{ item }}
          </div>
        </el-scrollbar>
      </div>
    </div>
  </basic-dialog>
</template>

<script setup lang="ts">
interface IProps {
  visible: boolean
  state: {
    success_count: string
    success_rr_count: string
    domain_count: string
    fail_domains: string[]
  }
}
interface IEmits {
  (event: 'update:visible', value: boolean)
}

defineProps<IProps>()
const emit = defineEmits<IEmits>()
</script>

<style lang="scss" scoped>
.custom-table {
  border-bottom: 1px solid #f1f2f3;
  .t-head,
  .t-body {
    display: flex;
    & > div {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }
  .t-head {
    background-color: #f7f8fa;
  }
}
</style>
